/**
 * Gitee: https://gitee.com/chendaiming/flex_layout
 * Author: chendaiming
 */
/* 以行布局 */
.rflex{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-flow: row;flex-flow: row;}

/* 以列布局 */
.cflex{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-flow: column;flex-flow: column;}

/* 行布局自动换行 */
.rflex_wrap{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-flow:row wrap;flex-flow: row wrap;}

/* 布局参数 */
.flex_1{-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;-webkit-tap-highlight-color: transparent;}
.flex_2{-webkit-box-flex: 2;-webkit-flex: 2;-ms-flex: 2;flex: 2;-webkit-tap-highlight-color: transparent;}
.flex_3{-webkit-box-flex: 3;-webkit-flex: 3;-ms-flex: 3;flex: 3;-webkit-tap-highlight-color: transparent;}
.flex_4{-webkit-box-flex: 4;-webkit-flex: 4;-ms-flex: 4;flex: 4;-webkit-tap-highlight-color: transparent;}
.flex_5{-webkit-box-flex: 5;-webkit-flex: 5;-ms-flex: 5;flex: 5;-webkit-tap-highlight-color: transparent;}
.flex_6{-webkit-box-flex: 6;-webkit-flex: 6;-ms-flex: 6;flex: 6;-webkit-tap-highlight-color: transparent;}
.flex_7{-webkit-box-flex: 7;-webkit-flex: 7;-ms-flex: 7;flex: 7;-webkit-tap-highlight-color: transparent;}
.flex_8{-webkit-box-flex: 8;-webkit-flex: 8;-ms-flex: 8;flex: 8;-webkit-tap-highlight-color: transparent;}
.flex_9{-webkit-box-flex: 9;-webkit-flex: 9;-ms-flex: 9;flex: 9;-webkit-tap-highlight-color: transparent;}
.flex_10{-webkit-box-flex: 10;-webkit-flex: 10;-ms-flex: 10;flex: 10;-webkit-tap-highlight-color: transparent;}

/* 内容 X 轴布局 */
.flex_x_center{justify-content: center;}
.flex_x_start{justify-content: flex-start}
.flex_x_end{justify-content: flex-end}

/* 内容 Y 轴布局 */
.flex_y_center{ align-items: center;}
.flex_y_start{align-items: flex-start}
.flex_y_end{align-items: flex-end}

/* 内容 X + Y 轴布局 */
.flex_center{justify-content: center;align-items: center;}

/* 单个内容布局 */
.flex_one_center{align-self: center}
.flex_one_start{align-self:flex-start}
.flex_one_end{align-self: flex-end}

/* 多内容布局 */
/* 内容居中 */
.flex_wrap_center{align-content: center}
/* 靠左 */
.flex_wrap_start{align-content:flex-start}
/* 靠右 */
.flex_wrap_end{align-content: flex-end}
/* 项目之间的间隔都相等 */
.flex_wrap_space_a{align-content: space-around}
/* 两端对齐，项目之间的间隔都相等 */
.flex_wrap_space_b{align-content: space-between}
/* 平均分布 */
.flex_space_a{justify-content: space-around}
/* 两边对齐 */
.flex_space_b{justify-content: space-between}

/*内容对齐方式*/
.flex_text_center{text-align: center!important}
.flex_text_left{text-align: left!important}
.flex_text_right{text-align: right!important}

/*清除漂浮*/
.flex_clear{clear: both!important}

/*============================== 基础样式设置 ============================== */
/************ 外边距 ************/
/*设置外边距*/
.flex_m{margin: 10px 12px !important;}
.flex_m_t{margin-top: 10px!important}
.flex_m_b{margin-bottom: 10px!important}
.flex_m_l{margin-left: 12px!important}
.flex_m_r{margin-right: 12px!important}
.flex_m_tb{margin-top: 10px!important;margin-bottom: 10px!important;}
.flex_m_lr{margin-left: 12px!important;margin-right: 12px!important;}
/*取消外边距*/
.flex_no_m{margin: 0 0 !important;}
.flex_no_m_t{margin-top: 0!important}
.flex_no_m_b{margin-bottom: 0!important}
.flex_no_m_l{margin-left: 0!important}
.flex_no_m_r{margin-right: 0!important}
.flex_no_m_tb{margin-top: 0!important;margin-bottom: 0!important;}
.flex_no_m_lr{margin-left: 0!important;margin-right: 0!important;}

/************ 内边距 ************/
/*设置外边距*/
.flex_p{padding: 10px 12px !important;}
.flex_p_t{padding-top: 10px!important}
.flex_p_b{padding-bottom: 10px!important}
.flex_p_l{padding-left: 12px!important}
.flex_p_r{padding-right: 12px!important}
.flex_p_tb{padding-top: 10px!important;padding-bottom: 10px!important;}
.flex_p_lr{padding-left: 12px!important;padding-right: 12px!important;}
/*取消外边距*/
.flex_no_p{padding: 0 0 !important;}
.flex_no_p_t{padding-top: 0!important}
.flex_no_p_b{padding-bottom: 0!important}
.flex_no_p_l{padding-left: 0!important}
.flex_no_p_r{padding-right: 0!important}
.flex_no_p_tb{padding-top: 0!important;padding-bottom: 0!important;}
.flex_no_p_lr{padding-left: 0!important;padding-right: 0!important;}
